<template>
  <div>

      <li>
        <div id="list">
        <el-image :src="this.baseSrc + this.imageSrc"></el-image>
          <div id="list_content">
            <span><strong @click="openHtml">{{this.title}}</strong></span>
             {{this.content}}

          </div>
        </div>
      </li>

  </div>
</template>

<script>
  export default {
    name: "ListCpn",
    props: {
      imageSrc: {
        type: String
      },
      title:{
        type:String
      },
      content:{
        type:String
      },
      baseSrc:{
        type:String
      },
      htmlSrc:{
        type:String
      }
    },
    data() {
      return {

      }
    },
    methods: {
      openHtml(){
        var str=this.baseSrc + this.htmlSrc;
        this.$emit("getHtmlData","/local/web_home" + this.htmlSrc);


      }
    }

  }
</script>

<style>
  #list {
    height: 100px;
    display: flex;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    align-items: center;
  }

  #list>el-image {
    width: 50px;
    height: 50px;
    margin-left: 6px;
  }

  #list>#list_content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>
